<template>
	<MyPage title="个人资料" :isback="true">
		<view slot="gBody">
			<view class="my-content">
				<view class="head">
					<u-avatar size="170" :src="avatar" @tap="chooseAvatar"></u-avatar>
					<view class="margin-top10 grey"><text @tap="chooseAvatar">修改头像</text></view>
				</view>				
				<u-cell-group class="list-group">
					<u-cell-item title="我的昵称" :value="userName" @click="showPopClick"></u-cell-item>
					<u-cell-item :arrow="false" title="我的账号" :value="loginName"></u-cell-item>
					<!-- <u-cell-item :arrow="false" title="性别" :value="sex"></u-cell-item> -->
					<!--<u-cell-item :arrow="false" title="生日" :value="birthday"></u-cell-item>-->
					<u-cell-item :arrow="false" title="所在地" :value="address"></u-cell-item>
					<u-cell-item :arrow="false" title="个人简介" :value="userDescription"></u-cell-item>
				</u-cell-group>
				
				<!-- 修改昵称 -->
				<u-popup v-model="popShow" mode="bottom" :closeable="true">
					<view class="pop-view">
						<view class="pop-title">修改昵称</view>
						<u-form ref="uForm">
							<u-form-item label="" prop="userNamePop" :border-bottom="false">
								<u-input v-model="userNamePop" placeholder="请输入昵称" maxlength="20" :border="true" :trim="true" />
							</u-form-item>
							<MyBtn title="保存" class="btn" @click="formSubmit"></MyBtn>
						</u-form>
					</view>
				</u-popup>

			</view>
		</view>
	</MyPage>
</template>

<script>
import mixin from "@/libs/mixin.js";import { getCardData } from '@/api/index.js'
export default {
	mixins: [mixin], 
	data() {
		return {
			avatar:'',
			userName: '',
			loginName: '',
			sex:'',
			birthday:'',
			address:'',
			userDescription: '欢迎来到用户中心！',
			
			popShow: false,
			 
			userNamePop: ''
		}
	},
	onLoad() { 
		// 头像裁切-监听从裁剪页发布的事件，获得裁剪结果
		uni.$on('uAvatarCropper', path => {
			this.avatar = path;
			uni.uploadFile({
				url: 'http://www.txzh.com.cn/api.php?act=upload',
				filePath: path,
				name: 'img',
				formData: {
					'token': this.$store.state.app.token  // 上传附带参数
				},
				complete: (res) => {
					console.log(res);
				}
			});
		});
		this.getCardData();
	},
	methods: {
		// 头像裁切
		chooseAvatar() {
			// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
			uni.$u.route({
				// 关于此路径，请见下方"注意事项"
				url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
				params: {
					destWidth: 300,
					rectWidth: 300,
					fileType: 'jpg'
				}
			})
		},
		// 获取信息
		getCardData(){
			getCardData({token:this.$store.state.app.token}).then(res=>{
				 this.loginName = res.list.zh; 
				 this.userName = res.list.userName;
				 this.userNamePop = res.list.userName;
				 this.src = res.list.img;
				 this.avatar=res.list.img;
				 this.address = res.list.address;
				 this.sex=res.list.sex;
			}).catch(err=>{
				uni.showToast({
					title: err.msg,
					icon:'none'
				})
			});
		},
		// 昵称修改
		showPopClick(){
			this.popShow = true;
			this.$nextTick(function(){
				this.$refs.uForm.setRules(this.rules);
			})
		},
		formSubmit(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.request({
						url: 'http://www.txzh.com.cn/api.php?app=Default&act=savenickname',  
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'X-Requested-With': 'xmlhttprequest'
						},
						data:{
							token:this.$store.state.app.token,
							nickname:this.userNamePop
						},
						success: res => {
							this.userName = this.userNamePop;
							uni.showToast({
								title: '修改成功',
								icon:'none'
							})
							this.popShow = false;
						},  
						fail: () => {},  
						complete: () => {}  
					});  
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.head{
	text-align: center;
}
.list-group{
	padding: 30rpx 0;
	/deep/ .u-cell{
		padding-left:0;
		padding-right:0;
		.u-cell_title{
			font-size:32rpx;
			color: #333;
		}
	}
}
.pop-view{
	padding:0 30rpx;
	.pop-title{
		font-size:35rpx;
		padding:30rpx 0;
	}
}
</style>